﻿<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title></title>
    <style>
        div {
        width:200px;
        height:200px;
        background:red;
        
        }
        main {
            
            height: 1000px;
            background: linear-gradient(blue,green);
        }
    </style>
</head>
<body>
    <div>
        
    </div>
    <MAIN></MAIN>
    <script>
        var div = document.querySelector(`div`);
        div.onclick = function (e) {
            //event 事件对象 记录当前事件信息
            //e.preventDefault() 阻止默认事件
            //e.stopPropagation(）阻作事件的传播
            //console.log(e.target); //触发事件的标签
            //事件对象。属性 获取鼠标的位置

            //获取的是鼠标距离浏览器视图窗口的偏移量
            console.log(e.clientX);
            console.log(e.clientY);
            //获取鼠标距离当前标签的偏移量
            //console.log(e.offsetX);
            //console.log(e.offsetY);
            //获取最近的设置有定位属性的父级标签的偏移量 到html为之
            //console.log(e.layerY);
            //console.log(e.layerY);
            //获取鼠标距离当前文档的偏移量
            console.log(e.pageX);
            console.log(e.pageY);
            
            
        }
    </script>
</body>
</html>